<template>
  <div>
    <el-container style="height: 930px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: #545c64">
        <el-menu
          :default-openeds="['1', '2']"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="selectMenu"
          align="left"
        >
          <el-menu-item index="1" @click="storeHandle(storeKeeper.storeId)">我的店铺</el-menu-item>
          <el-menu-item index="3" @click="storeKeeperHandle(storeKeeper.storeKeeperId)">我的信息</el-menu-item>
          <el-menu-item index="4" @click="messageHandle(storeKeeper.storeId)">我的留言</el-menu-item>
          <el-submenu index="2">
            <template slot="title">店铺管理</template>
            <el-menu-item index="2-1" @click="categoryHandle(storeKeeper.storeId)">目录管理</el-menu-item>
            <el-menu-item index="2-2" @click="produceHandle(storeKeeper.storeId)">商品管理</el-menu-item>
            <el-menu-item index="2-3" @click="orderHandle(storeKeeper.storeId)">订单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
              <!-- <router-link to="/login"> -->
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              <!-- </router-link> -->
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{storeKeeper.storeKeeperName}}</span>
        </el-header>

        <el-main align="left">
          <el-button v-if="storeId==0" @click="openStore(storeKeeperId)">申请开店</el-button>
          <store-add v-if="storeAddVisible" ref="storeAdd" @refreshDataList="getStoreDataList"></store-add>
          <!-- <my-store v-if="menuIndex=='1' && storeKeeper.storeStatus==1" ref="myStore"></my-store> -->

          <div class="mod-config" v-if="storeVisible && storeId>0">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getStoreDataList()">
              <el-button type="primary" @click="storeUpdateHandle(storeKeeperId)">修改</el-button>
            </el-form>
            <el-form :model="dataForm" label-width="140px">
              <el-form-item label="店铺名称:">
                <!-- <el-input v-model="data.storeName"></el-input> -->
                <label>{{data.storeName}}</label>
              </el-form-item>
              <el-form-item label="店主:">
                <label>{{storeKeeper.storeKeeperName}}</label>
              </el-form-item>
              <el-form-item label="所属分类:">
                <label>{{data.classifyName}}</label>
              </el-form-item>
              <el-form-item label="店铺描述:">
                <label>{{data.storeDesc}}</label>
              </el-form-item>
              <el-form-item label="店铺公告:">
                <label>{{data.storeAnno}}</label>
              </el-form-item>
              <el-form-item label="店铺头像:">
                <img :src="data.storeIcon" />
              </el-form-item>
              <el-form-item label="店铺背景图:">
                <img :src="data.backgroundUrl" />
              </el-form-item>
              <el-form-item label="店铺所在区域:">
                <label>{{data.storeLocation}}</label>
              </el-form-item>
              <el-form-item label="店铺详细地址:">
                <label>{{data.storeAddress}}</label>
              </el-form-item>
              <el-form-item label="店铺联系方式:">
                <label>{{data.storePhone}}</label>
              </el-form-item>
              <el-form-item label="店铺状态:">
                <!-- <i class="el-icon-time"></i>
                <el-switch
                  v-model="data.storeStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateBrandStatus(data)"
                ></el-switch>-->
                <label v-if="data.storeStatus==1">营业中</label>
                <label v-if="data.storeStatus==0">申请中</label>
              </el-form-item>
              <el-form-item label="店铺诚信度:">
                <label>{{data.storeIntegrity}}</label>
              </el-form-item>
              <el-form-item label="营业许可证:">
                <img :src="data.businessLicense" />
              </el-form-item>
              <el-form-item label="店铺招牌图:">
                <img :src="data.storeSign" />
              </el-form-item>
              <el-form-item label="店铺装潢图:">
                <img :src="data.storeFront" />
              </el-form-item>
            </el-form>
            <!-- 弹窗, 修改 -->
            <add-or-update
              v-if="storeUpdateVisible"
              ref="addOrUpdate"
              @refreshDataList="getStoreDataList"
            ></add-or-update>
          </div>
          <!-- <el-button v-if="menuIndex=='2-1'">目录管理</el-button> -->
          <store-keeper v-if="storeKeeperVisible" ref="showStoreKeeper"></store-keeper>
          <category v-if="categoryVisible && storeId>0" ref="showCategory"></category>
          <produce v-if="produceVisible && storeId>0" ref="showProduce"></produce>
          <!-- <el-button v-if="orderVisible && storeId>0" ref="showOrder">订单管理</el-button> -->
          <order v-if="orderVisible && storeId>0" ref="showOrder"></order>
          <update-password v-if="updatePasswordVisible" ref="updatwPassword"></update-password>
          <message v-if="messageVisible" ref="message"></message>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import MyStore from "./store/store";
import AddOrUpdate from "./store/store-add-or-update";
import Category from "./store/category";
import Produce from "./produce/produce";
import StoreKeeper from "./store/storekeeper";
import StoreAdd from "./store/store-add";
import Order from "./order/order";
import UpdatePassword from "./store/updatePassword";
import Message from "./message/Message";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    AddOrUpdate,
    Category,
    Produce,
    StoreKeeper,
    StoreAdd,
    Order,
    UpdatePassword,
    Message,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      storeId: 0,
      storeKeeperId: 0,
      storeKeeper: {
        storeKeeperId: 0,
        storeKeeperName: "请登录",
        storeStatus: 0,
        storeId: 0,
      },
      menuIndex: "1",
      //store
      dataForm: {
        key: "",
      },
      data: [],
      // status: 1,
      dataLoading: false,
      storeUpdateVisible: false,
      storeVisible: true,

      //category
      categoryVisible: false,

      //produce
      produceVisible: false,

      //order
      orderVisible: false,

      //storeKeeper
      storeKeeperVisible: false,

      storeAddVisible: false,

      updatePasswordVisible: false,

      //message
      messageVisible: false,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleCommand(command) {
      if (command == "logout") {
        this.$cookies.set("storeKeeperId", 0);
        console.log("logout:cookies=", this.$cookies.get("storeKeeperId"));
        this.$router.push("/login");
      } else if (command == "updatePassword") {
        // alert("修改密码ing！");
        if (this.storeKeeper.storeKeeperId > 0) {
          this.updatePasswordVisible = true;
          // this.storeKeeperVisible = false;
          // this.orderVisible = false;
          // this.categoryVisible = false;
          // this.produceVisible = false;
          // this.storeVisible = false;
          // this.storeAddVisible = false;
          this.$nextTick(() => {
            this.$refs.updatwPassword.init(this.storeKeeperId);
          });
        } else {
          this.$message({
            message: "请先登录",
            type: "error",
            duration: 1500,
          });
        }
      }
    },
    getCookic(key) {
      // var key = "";
      var getCookie = document.cookie.replace(/[ ]/g, ""); //获取cookie，并且将获得的cookie格式化，去掉空格字符
      var arrCookie = getCookie.split(";"); //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
      var tips; //声明变量tips
      for (var i = 0; i < arrCookie.length; i++) {
        //使用for循环查找cookie中的tips变量
        var arr = arrCookie[i].split("="); //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
        if (key == arr[0]) {
          //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
          tips = arr[1]; //将cookie的值赋给变量tips
          break; //终止for循环遍历
        }
      }
      return tips;
    },
    messageHandle(id) {
      if (id > 0) {
        this.messageVisible = true;
        this.storeKeeperVisible = false;
        this.orderVisible = false;
        this.categoryVisible = false;
        this.produceVisible = false;
        this.storeVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.$nextTick(() => {
          this.$refs.message.initMessage(id);
        });
      } else {
        this.$message({
          message: "请先申请开店",
          type: "error",
          duration: 1500,
        });
      }
    },
    storeKeeperHandle(id) {
      if (id > 0) {
        this.storeKeeperVisible = true;
        this.orderVisible = false;
        this.categoryVisible = false;
        this.produceVisible = false;
        this.storeVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.messageVisible = false;
        this.$nextTick(() => {
          this.$refs.showStoreKeeper.init(id);
        });
      } else {
        this.$message({
          message: "请先登录",
          type: "error",
          duration: 1500,
        });
      }
    },
    orderHandle(id) {
      if (id > 0) {
        this.orderVisible = true;
        this.categoryVisible = false;
        this.produceVisible = false;
        this.storeVisible = false;
        this.storeKeeperVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.messageVisible = false;
        if (this.storeKeeper.storeStatus == 1) {
          this.$nextTick(() => {
            this.$refs.showOrder.init(id);
          });
        }
      } else {
        this.$message({
          message: "请先申请开店",
          type: "error",
          duration: 1500,
        });
      }
    },
    storeHandle(id) {
      if (this.storeId > 0) {
        this.storeVisible = true;
        this.orderVisible = false;
        this.categoryVisible = false;
        this.produceVisible = false;
        this.storeKeeperVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.messageVisible = false;
        // this.getStoreKeeper(this.$route.params.storekeeperId);
        this.getStoreDataList(this.storeId);
      } else {
        this.$message({
          message: "请先申请开店",
          type: "error",
          duration: 1500,
        });
      }
      // console.log("storeHandle:storeKeeperId=",this.$route.params.storekeeperId);
      // this.getStoreDataList(this.storeId);
    },
    produceHandle(id) {
      if (id > 0) {
        this.produceVisible = true;
        this.categoryVisible = false;
        this.orderVisible = false;
        this.storeVisible = false;
        this.storeKeeperVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.messageVisible = false;
        if (this.storeKeeper.storeStatus == 1) {
          this.$nextTick(() => {
            this.$refs.showProduce.init(id);
          });
        }
      } else {
        this.$message({
          message: "请先申请开店",
          type: "error",
          duration: 1500,
        });
      }
    },
    categoryHandle(id) {
      if (id > 0) {
        this.categoryVisible = true;
        this.produceVisible = false;
        this.orderVisible = false;
        this.storeVisible = false;
        this.storeKeeperVisible = false;
        this.storeAddVisible = false;
        this.updatePasswordVisible = false;
        this.messageVisible = false;
        if (this.storeKeeper.storeStatus == 1) {
          this.$nextTick(() => {
            this.$refs.showCategory.init(id);
          });
        }
      } else {
        this.$message({
          message: "请先申请开店",
          type: "error",
          duration: 1500,
        });
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectMenu(index) {
      this.menuIndex = index;
    },
    getStoreDataList(id) {
      console.log("获取店铺信息：id=", id);
      this.storeId = id ? id : this.storeId;
      this.storeKeeper.storeStatus = 1;
      this.dataLoading = true;
      this.$http
        .get(`${process.env.URL_HEAD}/store/store/info/${this.storeId}`, {
          withCredentials: true,
        })
        .then(({ data }) => {
          this.data = data.store;
          console.log(this.data);
        });
    },
    // 修改
    storeUpdateHandle(id) {
      this.storeUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(this.data.storeId);
      });
    },
    //申请开店
    openStore(id) {
      this.storeAddVisible = true;
      this.storeKeeperVisible = false;
      this.orderVisible = false;
      this.categoryVisible = false;
      this.produceVisible = false;
      this.storeVisible = false;
      console.log("openStore1:id=", this.storeKeeperId);
      console.log("openStore2:id=", this.dataForm.storeKeeperId);
      if (this.storeKeeperId > 0) {
        this.$nextTick(() => {
          this.$refs.storeAdd.init(this.storeKeeperId);
        });
      } else {
        console.log("是这里！！！");
        this.$message({
          message: "请先登录",
          type: "error",
          duration: 1500,
        });
      }
    },
    updateBrandStatus(data) {
      console.log("最新状态", data);
      //   let { storeId, storeStatus } = data;
      let newStore = {
        storeId: data.storeId,
        storeStatus: data.storeStatus,
      };
      this.$http
        .post(`${process.env.URL_HEAD}/store/store/update`, newStore, {
          withCredentials: true,
        })
        .then(({ data }) => {
          this.$message({
            type: "success",
            message: "状态更新成功",
          });
        });
    },
    getStoreKeeper(id) {
      console.log("getStoreKeeper:", id);
      this.$nextTick(() => {
        this.$http
          .get(
            `${process.env.URL_HEAD}/store/storekeeper/info/${id ? id : 0}`,
            {
              withCredentials: true,
            }
          )
          .then(({ data }) => {
            if (data && data.code === 0) {
              this.storeId = data.storeId;
              // if (data.storeStatus == 1) {
              console.log("getStoreKeeper: 获取storeId=", data.storeId);
              this.getStoreDataList(data.storeId);
            }
          });
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.storeKeeperId = this.$route.params.storekeeperId;
    let id = this.$route.params.storekeeperId;
    console.log(`storeKeeperId:${id ? id : 0}`);
    this.$nextTick(() => {
      this.$http
        .get(`${process.env.URL_HEAD}/store/storekeeper/info/${id ? id : 0}`, {
          params: { withCredentials: true },
          withCredentials: true,
        })
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.storeKeeper.storeKeeperId = data.storekeeper.storekeeperId;
            this.storeKeeper.storeKeeperName = data.storekeeper.storekeeperName;
            this.storeKeeper.storeStatus = data.storeStatus;
            this.storeKeeper.storeId = data.storeId;
            this.storeId = data.storeId;
            if (data.storeStatus == 1) {
              this.getStoreDataList(data.storeId);
            }
          }
        });
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>